<template>
  <div class="wrapper">
    <div class="header-wrapper">
        <div class="header-title">
          <span>空气质量-{{airText}}</span>
          <span>{{area}}-{{city}}市</span>
        </div>
        <div class="header-text">
          <span>{{temp}}℃</span>
          <span>{{weather}}</span>
        </div>
        <div class="weather-advice">{{weatherAdvice}}</div>
    </div>
    <div class="body-wrapper">
      <div class="body">
        <div class="data-wrapper">
          <div class="data">
            <img class="data-logo" src="/static/images/wendu.png"/>
            <div class="data-text">
              <div class="data-title">温度</div>
              <div class="data-value">{{Temp}}℃</div>
            </div>
          </div>
          <div class="data">
            <img class="data-logo" src="/static/images/shidu.png"/>
            <div class="data-text">
              <div class="data-title">湿度</div>
              <div class="data-value">{{Hum}}%</div>
            </div>
          </div>
        </div>
                <div class="data-wrapper">
          <div class="data">
            <img class="data-logo" src="/static/images/guanzhao.png"/>
            <div class="data-text">
              <div class="data-title">光照度</div>
              <div class="data-value">{{Light}}Lx</div>
            </div>
          </div>
          <div class="data">
            <img class="data-logo" src="/static/images/led.png"/>
            <div class="data-text">
              <div class="data-title">客厅灯</div>
              <div class="data-value">
                <switch @change="onLedChange" checked="Led"  color="#3d7ef9" />
              </div>
            </div>
          </div>
        </div>
        <div class="data-wrapper">
          <div class="data">
            <img class="data-logo" src="/static/images/baojinqi.png"/>
            <div class="data-text">
              <div class="data-title">报警器</div>
                <switch  @change="onBeepChange" checked="Beep" color="#3d7ef9" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import { connect } from 'mqtt/dist/mqtt.js'
const mqttUrl = 'wxs://www.xiemingquan.top/mqtt'



export default {
  data () {
    return {
      client:{},
      Temp:0,
      Hum:0,
      Light:0,
      Led:false,
      Beep:false,
      area:'请求中',
      city:'请求中',
      airText:'请求中',
      temp:'请求中',
      weather:'请求中',
      weatherAdvice:'请求中'
      };
  },

  components: {},

  methods: {
    onLedChange(event){
      var that=this
      console.log(event.mp.detail)
      let sw=event.mp.detail.value;
      that.Led=sw
      if(sw){
        that.client.publish('/mystm32/sub','{"target":"LED","value":1}',function(err){
          if(!err){
            console.log("成功发命令-开灯")
          }
        })
      }else{
         that.client.publish('/mystm32/sub','{"target":"LED","value":0}',function(err){
          if(!err){
            console.log("成功发命令-关灯")
          }
        })
      }
    },
    onBeepChange(event){
      var that=this
      console.log(event.mp.detail)
      let sw=event.mp.detail.value;
      that.Beep=sw
      if(sw){
        that.client.publish('/mystm32/sub','{"target":"BEEP","value":1}',function(err){
          if(!err){
            console.log("成功发命令-打开报警器")
          }
        })
      }else{
         that.client.publish('/mystm32/sub','{"target":"BEEP","value":0}',function(err){
          if(!err){
            console.log("成功发命令-关闭报警器")
          }
        })
      }
    }
  },
  // created () {
  //    let app = getApp()
  // }
  onShow(){
    var that = this//指向整个index.vue 组件
    const options={
      connectTimeout:4000,
      clientId:'xieminquan',
    }
    that.client = connect(mqttUrl,options)
       that.client.on('connect',function(){
         console.log("成功连接mqtt服务器")
         that.client.subscribe("/mystm32/pub",function(err){
           if(!err){
             console.log("成功订阅设备上行数据Topic")
           }
         })
       })
       that.client.on('message',function(topic,message){
         console.log(topic)
        
         //messages是16进制Buffer字节流
         let dataFromDev={}
         dataFromDev=JSON.parse(message)//{ "Temp":69 ,"Hum":69,"Light":11111}数据格式
         console.log(dataFromDev)
         that.Temp=dataFromDev.Temp
         that.Hum=dataFromDev.Hum
         that.Light=dataFromDev.Light
         that.Led=dataFromDev.Led
         that.Beep=dataFromDev.Beep
      });
      wx.getLocation({
        type:"wgs84",
        success(res){
          const latitude=res.latitude;
          const longitude=res.longitude;
          const key='369461e524f34761a80f11fe4a617737'
          wx.request({
            url:`https://devapi.qweather.com/v7/weather/now?location=${longitude},${latitude}&key=${key}`,
            success(res){
              //console.log(res.data);
              let now =res.data.now
              //console.log(now)
              that.weather=now.text
              that.temp=now.temp

              }
          });
          wx.request({
            url:`https://geoapi.qweather.com/v2/city/lookup?location=${longitude},${latitude}&key=${key}`,
            success(res){
            //console.log(res.data);
            let location =res.data.location[0]
            that.city=location.adm2
            that.area=location.adm1
            }
          });
          wx.request({
            url:`https://devapi.qweather.com/v7/air/now?location=${longitude},${latitude}&key=${key}`,
            success(res){
            //console.log(res.data);
            let now =res.data.now
            //console.log(now)
            that.airText=now.category
            }
          });
          wx.request({
            url:`https://devapi.qweather.com/v7/indices/1d?location=${longitude},${latitude}&key=${key}&type=1 `,
            success(res){
            console.log(res.data);
            let daily =res.data.daily
            console.log(daily);
            that.weatherAdvice=daily[0].text
            }
          });
        }
      });
  }
}
</script>




<style lang="scss" scoped>
.wrapper{
  padding: 15px;
  .header-wrapper{
    background-color: #3d7ef9;
    border-radius: 20px;
    color: #fff;
    box-shadow: #d6d6d6 0px 0px 5px;
    padding: 15px 30px;
    .header-title{
      display:flex;
      justify-content: space-between;
    }
    .header-text{
      font-size: 32px;
      font-weight: 400;
      display: flex;
      justify-content: space-between;
    }
    .weather-advic{
      margin-top: 20px;
      font-size: 12px;
    }
  }
  .data-wrapper{
    margin-top:20px;
    display: flex;
    justify-content: space-between;
    .data{
      background-color: #fff;
      width: 150px;
      height: 80px;
      border-radius:20px ;
      display: flex;
      justify-content: space-around;
      padding: 0 8px;
      box-shadow: #d6d6d6 0px 0px 5px;
      .data-logo{
        height: 36px;
        width: 36px;
        margin-top: 15px;
      }
      .data-text{
        margin-top: 15px;
        color:#7f7f7f;
        .data-value{
          font-size: 26px;
        }
      }
    }
  }
}


</style>
